<template>
  <div class="satisfaction-gauge" style="width: 500px; height: 280px;">
    <!-- 标题区域 -->
    <div class="title-bar">
      累计办件满意度
    </div>

    <!-- 主内容区 -->
    <div class="content-container">
      <!-- 左侧：仪表盘 -->
      <div class="gauge-container">
        <div id="gauge-chart" style="width: 200px; height: 200px;"></div>
      </div>

      <!-- 右侧：条形图 -->
      <div class="bar-container">
        <div class="bar-item">
          <span class="label">非常满意</span>
          <div class="bar-wrapper">
            <div class="bar" style="width: 90%; background-color: #a7d45c;"></div>
            <span class="percent">90%</span>
          </div>
        </div>
        <div class="bar-item">
          <span class="label">基本满意</span>
          <div class="bar-wrapper">
            <div class="bar" style="width: 30%; background-color: #9b9bfc;"></div>
            <span class="percent">30%</span>
          </div>
        </div>
        <div class="bar-item">
          <span class="label">不满意</span>
          <div class="bar-wrapper">
            <div class="bar" style="width: 10%; background-color: #e94c4c;"></div>
            <span class="percent">10%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'Manyidu',
  setup() {
    let gaugeChart = null;

    onMounted(() => {
      const chartDom = document.getElementById('gauge-chart');
      if (chartDom) {
        gaugeChart = echarts.init(chartDom);

        const option = {
          backgroundColor: '#0f2035',
          series: [
            {
              type: 'gauge',
              progress: {
                show: true,
                width: 16
              },
              axisLine: {
                lineStyle: {
                  width: 16,
                  color: [
                    [0.3, '#e94c4c'],    // 0-30% 红色
                    [0.7, '#ff9900'],    // 30-70% 橙色
                    [1, '#a7d45c']       // 70-100% 绿色
                  ]
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                length: 12,
                lineStyle: {
                  width: 2,
                  color: '#999'
                }
              },
              axisLabel: {
                distance: 18,
                color: '#fff',
                fontSize: 10
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 16,
                itemStyle: {
                  borderWidth: 10,
                  borderColor: '#a7d45c'
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontWeight: 'bold',
                color: '#fff',
                offsetCenter: [0, '50%'],
                formatter: '{value}%'
              },
              data: [
                {
                  value: 70,
                  name: '满意度'
                }
              ]
            }
          ]
        };

        gaugeChart.setOption(option);

        window.addEventListener('resize', () => {
          if (gaugeChart) {
            gaugeChart.resize();
          }
        });
      }
    });

    onUnmounted(() => {
      if (gaugeChart) {
        gaugeChart.dispose();
      }
    });

    return {};
  }
};
</script>

<style scoped>
.satisfaction-gauge {
  width: 500px;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #0f2035;
  position: relative;
}

.title-bar {
  background-color: #0f2035;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.content-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 15px;
  height: 220px;
}

.gauge-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 10px;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

.bar-wrapper {
  flex: 1;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  position: relative;
}

.bar {
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
}

.percent {
  color: #fff;
  font-size: 12px;
  margin-left: 5px;
  position: absolute;
  right: 0;
}
</style>